<!-- 浏览足迹 -->
<template>
  <div class="fa">
    <div class="dhz">
    <div class="top">
        <p class="txt1">为你最多展示100个足迹商品哦</p>
        <!-- <div class="txt2" @click="fun">清空</div> -->
        <van-button type="primary" text="清空" @click="fun"/>
        <van-overlay :show="show" @click="show = false"/>
        <div class="txt3" @click="fun3">编辑</div>
    </div>
    <div class="m-box" v-if="flag">
        <div><img src="../../../assets/img/gantan.png" alt=""></div>
        <p>确定清空浏览器纪录？</p>
        <div class="dv">
            <div :show="show" @click="fun1">取消</div>
            <div class="right" :show="show" @click="fun2">确认</div>
        </div>
    </div>
    <div class="core" v-if="flgs">
        <div class="todys">
            <p class="pp">今天</p>
            <div class="one">
                <div>
                <img src="../../../assets/img/21.png" alt="">
                <p class="p">美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量暖水壶烧水壶净甜家用大容量开水壶智能自动断电1705b</p>
                <p><span>￥</span>85.<span>00</span></p>
            </div>
            </div>
            <div class="one">
                <div>
                <img src="../../../assets/img/22.png" alt="">
                <p class="p">迪奥口红999哑光720化妆品口红礼盒生日礼物女情人节礼物送女友 【人气必入】999哑光 传奇正红</p>
                <p><span>￥</span>268.<span>00</span></p>
                </div>
            </div>
        </div>
        <div class="yedy">
            <p class="pp">昨天</p>
            <div class="one">
                <img src="../../../assets/img/20.png" alt="">
                <p class="p">中国论文查重学术不端查重软件检测本科专科pmlc硕士tml2博士vip5.3 期刊（职称期刊，1.4万字符，和杂志社结果一致）</p>
                <p><span>￥</span>40.<span>00</span></p>
            </div>
        </div>
    </div>
    <div class="bottom" v-if="flags">
        <div class="xz">
        <van-checkbox-group v-model="result" direction="horizontal" checked-color="red" icon-size="18px">
        <van-checkbox name="a"></van-checkbox>
        </van-checkbox-group>
        </div>
        <p>全选</p>
        <div class="right">删除</div>
    </div>
</div>
  </div>
</template>

<script>
import { Rule } from 'webpack-chain'

export default {
    data(){
        return {
            flag:false,
            flags:false,
            show: false,
            result: [],
            flgs:true,
            flg:true
        }
    },
    methods:{
        fun (){
            this.flag = true
            this.show = true
        },
        fun1 (){
            this.flag = false
            this.show = false
        },
        fun2 (){
            this.flag = false
            this.show = false
            this.flgs = false
        },
        fun3 (){
            this.flags = !this.flags
            this.flg = !this.flg
        }
        
    }
}
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }
    .top {
        width: 100%;
        height: 40px;
        background-color: #eee;
        display: flex;
        align-items:center;
        box-sizing: border-box;
    }
    .txt1 {
        color: #8c8c8c;
        font-size: 12px;
        padding-left: 10px;
    }
    .txt2 {
        color: #2e2e2d;
        font-size: 12px;
        width: 40px;
        line-height: 20px;
        margin-left: 120px;
    }
    .txt3 {
        color: #FA2C19;
        font-size: 12px;
        width: 40px;
        line-height: 20px;
        margin-left: 20px;
      
    }

    .fa {
        position:relative,
    }
    .m-box {
        width: 295px;
        height: 156px;
        background-color: #fff;
        text-align: center;
        border-radius: 20px;
        position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        z-index:2;
    }
    .m-box img {
        width: 30px;
        height: 30px;
        margin-top: 20px;
    }
    .m-box p {
        color: #262626;
        width: 248px;
        height: 78px;
        margin-top: 20px;
        margin-left: 25px;
    }
    .dv {
        display: flex;
        justify-content: space-around;
        position: absolute;
        bottom: 20px;
        left: 25px;
    }
    .dv div {
        width: 100px;
        height: 25px;
        border-radius: 25px;
        color: #fa2c19;
        font-size: 12px;
        border: 1px solid #fa2c19;
        display: flex;
        align-items: center;justify-content: center;
    }
    .dv .right {
        margin-left: 25px;
        color: #fff;
        background: linear-gradient(135deg,#fa2c19 0,#fa6419 100%); ;
    }
    .dhz {
        width: 100%;
        height: 667px;
        background-color: #eee;
    }
    .core .todys {
        width: 100%;
        height: 240px;
        background-color: #fff;
        border-radius: 15px;
    }
    .core .yedy {
        width: 100%;
        height: 240px;
        background-color: #fff;
        border-radius: 15px;
        margin-top: 10px;
    }
    .one {
        width: 115px;
        height: 163px;
        text-align: center;
        white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
        float: left;
        
    }
    .one img {
        width: 100px;
        height: 100px;
        margin-left: 20px;
    }
    .one .p {
        width: 100px;
        font-size: 12px;
        height: 30px;
        color: #2e2e2d;
        margin-left: 20px;
    }
    
    .pp {
        font-weight: bold;
        color: #262626;
        font-size: 14px;
        margin-left: 10px;
        line-height: 60px;   
    }

    .one p {
        color: red;
    }
    .one p span {
        font-size: 12px;
        color: red;
    }
    .bottom {
        width: 100%;
        height: 50px;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;
    }
    .bottom .left {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1px solid #c9c9c9;
        margin-left: 20px;
    }
    .bottom .right {
        width: 105px;
        line-height: 38px;
        color: #fff;
        text-align: center;
        background: linear-gradient(135deg,#f2140c 0,#f2270c 69.8395009973%,#f24d0c 100%);
        border-radius: 30px;
        font-size: 13px;
        margin-left: 180px;
    }
    .bottom p {
        font-size: 12px;
        color: #262626;
    }
    .van-button--primary {
        height: 40px;
        background-color: #eee;
        border: none;
        color: #2E2E2D;
        font-size: 12px;
        margin-left: 100px;
    }

    .xz{
        margin-left: 20px;
    }
</style>